<template>
  <div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      :title="title || (Action === 1 ? '添加资产' : '修改资产')" 
      v-el-drag-dialog 
      width="600px"
      @close="cancel()" 
    >
      <el-row>
        <el-form label-width="120px" :rules="rules" :model="Moder" ref="batchRegistrationDialog">
          <el-col :span="24">
            <el-form-item label="部门：" prop="DepartmentID">
              <el-cascader
                v-model="Moder.DepartmentID"
                ref="cascaderAddr"
                placeholder="请选择部门"
                :options="nodeData"
                :props="{children: 'Children', label: 'Name', value: 'ID', checkStrictly: true, emitPath: false, expandTrigger: 'hover'}" 
                clearable
                @visible-change="elCascaderOnlick"
                @expand-change="elCascaderOnlick" 
                style="width: 100%;"
                >
            </el-cascader>
            </el-form-item>
            <el-form-item label="投入使用时间:" prop="StartDate">
              <el-date-picker
                style="width:100%"
                v-model="Moder.StartDate"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="使用角色:" prop="Role">
              <el-select v-model="Moder.Role" placeholder="请选择使用角色" style="width:100%">
                <el-option v-for="(item, index) in RoleList" :key="index" :label="item.Role" :value="item.Role"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="cancel()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"; 
import { connrequest } from '@/api/firstPage'
import { toTree } from '@/utils/index'
export default {
  directives: { elDragDialog },
  props: {
    Moder:{
      type: Object,
      default: {}
    },
    Action: {
      type: Number,
      default: 1
    },
    moderVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    moderVisible(val){
      this.GetDepartment()
      this.GetParamDictRole()
      this.$nextTick(() => {
        this.$refs.batchRegistrationDialog.clearValidate();
      })
    }
  },
  data() {
    return {
      nodeData: [],
      DepartmentList: [],
      RoleList: [],
      rules:{
        DepartmentID: [
          {required: true, message: '请选择部门', trigger: 'change'}
        ],
        StartDate: [
          {required: true, message: '请选择开始使用日期', trigger: 'change'}
        ],
        Role: [
          {required: true, message: '请选择角色', trigger: 'change'}
        ],
      },
    }
  },
  methods:{
    async GetDepartment(){
      const res = await connrequest('GetDepartmentDeviceSumTree')
      res.Data.Name = res.Data.RootName
      this.nodeData = toTree(res.Data.Department, res.Data.RootName)[0]['Children']
    },
    async GetParamDictRole(){
      const res = await connrequest('GetParamDictRole')
      this.RoleList = res.Data
    },
    cancel(){
      this.$emit('cancel')
    },
    async submit(){
      this.$refs['batchRegistrationDialog'].validate(async (valid) => {
        if (valid) {
          this.$emit('submit',this.Moder, this.Action)
        }
      })
    },
    elCascaderOnlick(){
        let that = this;
        setTimeout(function() {
            document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
            el.onclick = function() {
                this.previousElementSibling.click();
                that.$refs.cascaderAddr.dropDownVisible = false;
            };
            });
        }, 100);
    },
    //级联选项卡点击关闭下拉
    groupOnlick(){
        let that = this;
        setTimeout(function() {
            document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
            el.onclick = function() {
                this.previousElementSibling.click();
                that.$refs.group.dropDownVisible = false;
            };
            });
        }, 100);
    },
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    position: relative;
    overflow-y: auto;
  }
  
  /* 设置.el-dialog内部滚动条的宽度和颜色 */
  ::v-deep .el-dialog .el-dialog__body::-webkit-scrollbar-thumb {
    background-color: #888; /* 设置滚动条颜色 */
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>